<template>
  <div
    class="app-container salary-container"
    v-if="detailSalaryData.length"
    id="menuScroll1-1"
  >
    <div class="cate-salary">
      <div class="salary-title">
        <img
          class="item-img"
          src="https://img3.job1001.com/data_center/images/position_item_icon.png"
          alt="404"
        />
        <span class="item-title">薪酬分析</span>
      </div>
      <div
        class="bottom-salary"
        :id="'scroll1-' + index"
        v-for="(item, index) in detailSalaryData"
        :key="index"
      >
        <!-- 有柱状图也有有曲线图，他们所需的数据结构是不一样的 -->
         
        <regionRankSalary v-if="item.layerId == 87" :salaryItem="item" />
        <workSalary v-else-if="item.layerId == 44" :salaryItem="item" />
        <educationSalary v-else-if="item.layerId == 45" :salaryItem="item" />
        <industryAverageSalary
          v-else-if="item.layerId == 174"
          :salaryItem="item"
        />
        <!-- <industrySalaryChanges
          v-else-if="item.layerId == 175"
          :salaryItem="item"
        /> -->
        <companyAverageSalary
          v-else-if="item.layerId == 176"
          :salaryItem="item"
        />
        <!-- <companySalaryChanges
          v-else-if="item.layerId == 177"
          :salaryItem="item"
        ></companySalaryChanges> -->
        <educationSalaryChanges
          v-else-if="item.layerId == 178"
          :salaryItem="item"
        />
        <!-- <workSalaryChanges
          v-else-if="item.layerId == 179"
          :salaryItem="item"
        ></workSalaryChanges> -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  getRegionSalaryList,
  getRegionSalaryTotalData,
  getRegionSalaryListExport,
} from "@/api/salary";
import SelectRegion from "@/components/SelectRegion";
import rangeSalary from "@/views/position/range_salary";
import regionSalary from "@/views/position/region_salary";
import regionRankSalary from "@/views/position/region_rank_salary";
import educationSalary from "@/views/position/education_salary";
import industryAverageSalary from "./components/industryAverageSalary/index";
import industrySalaryChanges from "./components/industrySalaryChanges/index";
import companyAverageSalary from "./components/companyAverageSalary/index";
import companySalaryChanges from "./components/companySalaryChanges/index";
import educationSalaryChanges from "./components/educationSalaryChanges/index";
import workSalaryChanges from "./components/workSalaryChanges/index";
import workSalary from "@/views/position/work_salary";
import regoinSearch from "@/views/position/components/regoinSearch";
import regionBarChart from "@/views/position/components/regionBarChart";
import browser from "browser-tool";
export default {
  name: "detailSalary",
  props: {
    detailSalaryData: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    SelectRegion,
    regoinSearch,
    regionBarChart,
    rangeSalary,
    regionSalary,
    educationSalary,
    workSalary,
    regionRankSalary,
    industryAverageSalary,
    industrySalaryChanges,
    companyAverageSalary,
    companySalaryChanges,
    educationSalaryChanges,
    workSalaryChanges,
  },
  data() {
    return {
      isShitBrowser: false,
      hoverName: "",
      hoverValue: "",
      regionLineDescAvg: "",
      regionBarDescAvg: "",
      activeName: "chart",
      chartData: {},
      myChart: null,
      list: null,
      totalData: {
        salaryNum: null,
        companyNum: null,
      },
      listLoading: true,
      tablePage: {
        pageNum: 1, // 第几页
        pageSize: 10, // 每页多少条
        total: 0, // 总记录数
      },
      positionName: "",
      selectTime: "",
      regionId: "",
      regionList: [],
      currentRegionName: "",
      pageSizes: [10, 20, 30],
      orderByColumn: "",
      orderBy: "",
      form: {},
      selectBetweenTime: [],
      // 时间选择器
      pickerOptions: {
        shortcuts: [
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      stepInfo: [
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide1.png",
          stepDesc: "第一步，打开导出文件",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide2.png",
          stepDesc: "第二步，选择数据范围。",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide3.png",
          stepDesc: "第三步，选择全部图表",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide4.png",
          stepDesc: "第四步，选择自己需要的样式备份",
        },
        {
          stepImage:
            "https://img3.job1001.com/data_center/images/exportGuide5.png",
          stepDesc: "第五步，图表制作完成啦！",
        },
      ],
    };
  },
  created() {
    // this.fetchData();

    this.positionName = this.$route.query.name;
    const browserInfo = browser();
    if (browserInfo.browser != "Chrome") {
      this.isShitBrowser = true;
    }
  },
  mounted() {},
  methods: {
    handleClick() {
      if (this.activeName == "full") {
        this.regionList = [];
        let date = new Date();
        let currentMonth = date.getMonth() + 1;
        let value =
          date.getFullYear() +
          "-" +
          (currentMonth < 10 ? "0" : "") +
          currentMonth +
          "-" +
          "01";

        // 默认显示上月日期
        let date1 = new Date();
        date1.setMonth(date1.getMonth() - 1); // 减去一个月
        let previousMonth = date1.getMonth() + 1;
        let value1 =
          date1.getFullYear() +
          "-" +
          (previousMonth < 10 ? "0" : "") +
          previousMonth +
          "-" +
          "01";

        // 确保selectBetweenTime中的日期按照从小到大的顺序排列
        this.selectBetweenTime = [value, value1].sort();
        this.fetchData();
      }
    },
    handleDateChange(val) {
      this.tablePage.pageNum = 1;
      this.fetchData();
    },
    onRegionChange(val) {
      this.currentRegionName = val.label;
      this.regionList = [val.value];
      this.tablePage.pageNum = 1;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      const params = {
        id: this.$route.query.id,
        page: this.tablePage.pageNum,
        perPage: this.tablePage.pageSize,
      };

      if (this.selectTime != "") {
        params.selectTime = this.selectTime;
      }
      if (this.regionList != []) {
        params.regionId = this.regionList[this.regionList.length - 1];
      }
      if (this.orderByColumn != "" && this.orderBy != "") {
        params.orderByColumn = this.orderByColumn;
        params.orderBy = this.orderBy == "ascending" ? "asc" : "desc";
      } else {
        params.orderByColumn = "generate_time";
        params.orderBy = "desc";
      }

      if (this.selectBetweenTime != null && this.selectBetweenTime != "") {
        params.selectBeginTime = this.selectBetweenTime[0];
        params.selectEndTime = this.selectBetweenTime[1];
      }
      getRegionSalaryList(params).then((response) => {
        const count = response.data.count - 0;
        this.tablePage.total = count;
        this.list = response.data.rows;
        this.listLoading = false;
      });
    },
    fetchTotalData() {
      this.listLoading = true;
      const params = {
        id: this.$route.query.id,
      };
      if (this.regionList != []) {
        params.regionId = this.regionList[this.regionList.length - 1];
      }
      if (this.selectBetweenTime != null && this.selectBetweenTime != "") {
        params.selectBeginTime = this.selectBetweenTime[0];
        params.selectEndTime = this.selectBetweenTime[1];
      }
      this.fetchData();
      getRegionSalaryTotalData(params).then((response) => {
        if (
          response.data != null &&
          response.data.companyNum != null &&
          response.data.salaryNum != null
        ) {
          this.totalData.salaryNum = parseFloat(
            response.data.salaryNum
          ).toFixed(2);
          this.totalData.companyNum = response.data.companyNum;
        } else {
          this.totalData.salaryNum = 0;
          this.totalData.companyNum = 0;
        }
        let content =
          `<div style='border-top:1px solid #e8e8e8;border-bottom:1px solid #e8e8e8;margin-top:-10px;font-size:14px;padding:28px 0;text-align:left;'>` +
          "<div style='font-size:16px;font-weight:bold;color:#222;margin-bottom:0px;'>通过您的查询条件（岗位，地区，时间）可得：</div>" +
          "<br/>" +
          "您查询的地区：[ " +
          (this.currentRegionName == "" || this.currentRegionName == null
            ? "全国"
            : this.currentRegionName) +
          " ] " +
          "<br>" +
          " 您查询的时间区间为：[ " +
          (this.selectBetweenTime == "" || this.selectBetweenTime == null
            ? "不限时间"
            : this.selectBetweenTime) +
          " ] " +
          "<br>" +
          "  平均薪酬为： " +
          this.totalData.salaryNum +
          "<br>" +
          " 职位总数为： " +
          this.totalData.companyNum;
        +`</div>`;

        this.$alert(content, "计算查询结果", {
          confirmButtonText: "确定",
          dangerouslyUseHTMLString: true,
        });
        this.listLoading = false;
      });
    },
    handlePageChange(currentPage) {
      this.tablePage.pageNum = currentPage;
      this.fetchData();
      // 在此刷新数据
    },
    handleSizeChange(pageSize) {
      this.tablePage.pageSize = pageSize;
      this.fetchData();
      // 在此刷新数据
    },
    onExportClick() {
      // 导出方法
      this.listLoading = true;
      const params = {
        id: this.$route.query.id,
        page: 1,
        perPage: 10000,
      };
      if (this.selectTime != "") {
        params.selectTime = this.selectTime;
      }
      if (this.regionList != []) {
        params.regionId = this.regionList[this.regionList.length - 1];
      }
      if (this.selectBetweenTime != "") {
        params.selectBeginTime = this.selectBetweenTime[0];
        params.selectEndTime = this.selectBetweenTime[1];
      }
      if (this.orderByColumn != "" && this.orderBy != "") {
        params.orderByColumn = this.orderByColumn;
        params.orderBy = this.orderBy == "ascending" ? "asc" : "desc";
      } else {
        params.orderByColumn = "generate_time";
        params.orderBy = "desc";
      }

      getRegionSalaryListExport(params)
        .then((result) => {
          const link = document.createElement("a"); // 创建a标签
          const blob = new Blob([result], { type: "application/vnd.ms-excel" }); // 设置文件流
          link.style.display = "none";
          // 设置连接
          link.href = URL.createObjectURL(blob); // 将文件流转化为blob地址
          link.download =
            (this.$route.query.name != undefined
              ? this.$route.query.name
              : "") + "地区薪酬数据统计表";
          document.body.appendChild(link);
          // 模拟点击事件
          link.click(); // 设置点击事件
          this.listLoading = false;
          window.URL.revokeObjectURL(link.href); // 释放掉blob对象
          document.body.removeChild(link); // 下载完成移除元素
        })
        .catch((err) => {
          console.log(err);
        });
    },
    sortChange(column) {
      this.orderByColumn = column.prop != null ? column.prop : "generate_time";
      this.orderBy = column.order != null ? column.order : "desc";
      this.fetchData();
      // 在此刷新数据
    },
  },
};
</script>

<style scoped lang="scss">
.list {
  /* height: 630px;
    overflow-y: auto; */
}
.app-container {
  position: relative;
  min-width: 800px;
  padding-top: 0px;
  padding-right: 0px;
  // min-height: calc(100vh - 190px);
  // overflow: hidden;
  // width: 100%;
  /* max-height: calc(100vh - 100px); */
  // background: linear-gradient(0, #eaf5ff 0%, #ffffff 100%);
  // background-image: url("https://upload.yl1001.com/upload/images/view?file=Q,tr--ap_8c=fney6Bg2IJzH69mz6q=xfFRO5e57Imp9e0psmHce_CdVSB9mv.png");
  // background-size: 100% 139px;
  // background-repeat: no-repeat;
  // border-radius: 10px 8px 8px 8px;
  // border: 0;
  // background-attachment: fixed;
  // background-position: 200px 139px;
  // padding-top: 10px;
  padding-left: 0px;
  overflow: scroll;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
}
.total-salary {
  // background: linear-gradient(0, #eaf5ff 0%, #ffffff 100%);
  background-size: 100% 219px;
  background-repeat: no-repeat;
  background-image: url("https://img3.job1001.com/data_center/images/salary_bg.png?v=1");
  // background: #ffffff;
  border-radius: 10px;
  border: 1px solid #cbdcfe;
  padding: 20px;
}
.cate-salary {
  // background: linear-gradient(0, #eaf5ff 0%, #ffffff 100%);
  background-size: 100% 293px;
  background-repeat: no-repeat;
  background-image: url("https://img3.job1001.com/data_center/images/salary_bg.png?v=1");
  // background: #ffffff;
  border-radius: 10px;
  border: 1px solid #cbdcfe;
  margin-top: 14px;
  padding: 20px;
}
.salary-title {
  display: flex;
  align-items: center;
  .item-img {
    width: 39px;
    height: 40px;
    align-self: center;
  }
  .item-title {
    margin-left: 10px;
    color: #000;
    font-size: 22px;
    font-weight: bold;
    font-family: PingFang SC;
  }
}
.isShitBrowser {
  background-position: 0px 0px;
}
</style>
